<template>
  <div>
    <!-- 热门推荐 -->
    <div class="g-wrap">
      <div class="n-rcmd">
        <div class="v-hd">
          <a href="javascript:;" class="tit">热门推荐</a>
          <div class="tab flex">
            <div v-for="(item, index) in pathArr" :key="item.id">
              <a
                href="javascript:;"
                class="tit-s"
                @click="$router.push(item.path)"
                >{{ item.text }}</a
              >
              <span class="line" v-if="pathArr.length - 1 !== index">|</span>
            </div>
          </div>
          <span class="more">
            <a href="javascript:;" class="mores" @click="more">更多</a>
            <i class="s-arrow"></i>
          </span>
        </div>
        <!-- 热门推荐主体 -->
        <ul class="m-cvrlst">
          <li
            v-for="(item, index) in recommend"
            :key="item.id"
            :index="index"
            @click="$router.push(`/playlistDetail?id=${item.id}`)"
          >
            <div class="u-cover .u-cover-1">
              <img :src="item.picUrl" alt="" />
              <a href="javascript:;" class="msk"></a>
              <div class="bottom">
                <a href="javascript:;" class="icon-play"></a>
                <span class="icon-headset"></span>
                <span class="nb">{{ item.playCount | format }}</span>
              </div>
            </div>
            <p class="dec">
              <a href="javascript:;" class="tit">
                <i :class="{ 'u-icn': item.type === 1 }"></i>
                {{ item.name }}
              </a>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getpersonalized, getDjprogram } from "../../http/api";
export default {
  data() {
    return {
      recommend: [],
      Djprogram: [],
      icnShow: false,
      pathArr: [
        { id: 1, text: "华语", path: "/playlist?cat=华语" },
        { id: 2, text: "流行", path: "/playlist?cat=流行" },
        { id: 3, text: "摇滚", path: "/playlist?cat=摇滚" },
        { id: 4, text: "民谣", path: "/playlist?cat=民谣" },
        { id: 5, text: "电子", path: "/playlist?cat=电子" },
      ],
    };
  },
  mounted() {
    getpersonalized().then((resopnse) => {
      // console.log(resopnse);
      if (resopnse.code === 200) {
        this.recommend = resopnse.result;
      }
    });

    getDjprogram().then((resopnse) => {
      // console.log(resopnse);
      if (resopnse.code === 200) {
        this.Djprogram = resopnse.result;
        resopnse.result.forEach((e, index) => {
          this.Djprogram[index].playCount = e.program.adjustedPlayCount;
        });
        this.recommend.splice(3, 1, this.Djprogram[0]);
        this.recommend.splice(5, 1, this.Djprogram[1]);
        this.recommend.splice(7, 1, this.Djprogram[2]);
      }
    });
  },
  methods: {
    more() {
      localStorage.setItem("curPage", 1);
      this.$router.push("/playlist");
    },
    jump() {
      this.$router.push("/playlist");
    },
  },
};
</script>
 
<style lang="less" scoped>
/* 热门推荐头部 */
.v-hd {
  height: 33px;
  padding: 0 10px 0 34px;
  background: url("../../assets/images/index.png") no-repeat;
  background-position: -225px -156px;
  border-bottom: 2px solid #c10d0c;
}
.v-hd .tit {
  float: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  color: #333;
}
.v-hd .tab {
  float: left;
  margin: 7px 0 0 20px;
}
.tit-s,
a.tit-s:hover {
  color: #666;
}
.tit-s:hover {
  color: #666;
  text-decoration: underline;
}
.v-hd .tab .line {
  margin: 0 10px;
  color: #ccc;
}
.v-hd .more {
  float: right;
  margin-top: 9px;
}
.more .mores,
.mores:hover {
  color: #666;
}
.more .mores:hover {
  text-decoration: underline;
}
.s-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  background: url("../../assets/images/index.png") no-repeat;
  background-position: 0 -240px;
}

/* 热门推荐专辑 */
.n-rcmd .m-cvrlst {
  margin: 20px 0 0 -42px;
}
.n-rcmd .m-cvrlst li {
  width: 140px;
  height: 204px;
  padding-left: 42px;
}
.m-cvrlst li {
  float: left;
  width: 140px;
  height: 188px;
  overflow: hidden;
  padding: 0 0 30px 50px;
  line-height: 1.4;
}
.u-cover {
  position: relative;
  display: block;
}
.u-cover-1 {
  width: 140px;
  height: 140px;
}
.u-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.u-cover .msk {
  background: url("../../assets/images/coverall.png") no-repeat;
  background-position: 0 0;
}
.u-cover .msk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.u-cover .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 27px;
  background: url("../../assets/images/coverall.png") no-repeat;
  background-position: 0 -537px;
  color: #ccc;
}
.u-cover .icon-play {
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 16px;
  height: 17px;
  background: url("../../assets/images/iconall.png") no-repeat;
  background-position: 0 0;
}
.u-cover .icon-play:hover {
  background-position: 0 -60px;
}
.u-cover .icon-headset {
  float: left;
  width: 14px;
  height: 11px;
  background: url("../../assets/images/iconall.png") no-repeat;
  background-position: 0 -24px;
  margin: 9px 5px 9px 10px;
}
.u-cover .nb {
  float: left;
  margin: 7px 0 0 0;
}
.m-cvrlst li .dec {
  margin: 8px 0 3px;
  font-size: 14px;
}
.m-cvrlst li p {
  width: 100%;
}
.m-cvrlst li .tit {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  color: #000;
}
.m-cvrlst li .tit:hover {
  text-decoration: underline;
}
.m-cvrlst li p .u-icn {
  margin-top: -1px;
}
.u-icn {
  width: 35px;
  height: 15px;
  padding-right: 2px;
  background: url("../../assets/images/icon.png") no-repeat;
  background-position: -31px -658px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
</style>